<script lang="ts" setup>
import { useAppStore, DeviceType } from "@/store/modules/app"
import { useSettingsStore } from "@/store/modules/setting"
import { AppMain, NavigationBar, Settings, Sidebar, TagsView, RightPanel } from "./components"
import useResize from "@/hooks/useResize"

const icons = [
  'mdi-facebook',
  'mdi-twitter',
  'mdi-linkedin',
  'mdi-instagram',
];

const appStore = useAppStore()
const settingsStore = useSettingsStore()

useResize()

const classObj = computed(() => {
  // console.log('classObi', {
  //   hideSidebar: !appStore.sidebar.opened,
  //   openSidebar: appStore.sidebar.opened,
  //   withoutAnimation: appStore.sidebar.withoutAnimation,
  //   mobile: appStore.device === DeviceType.Mobile,
  //   showGreyMode: showGreyMode.value,
  //   showTagIcon: showTagIcon.value,
  //   showColorWeakness: showColorWeakness.value
  // })
  return {
    hideSidebar: !appStore.sidebar.opened,
    openSidebar: appStore.sidebar.opened,
    withoutAnimation: appStore.sidebar.withoutAnimation,
    mobile: appStore.device === DeviceType.Mobile,
    showGreyMode: showGreyMode.value,
    showTagIcon: showTagIcon.value,
    showColorWeakness: showColorWeakness.value
  }
})



const showSettings = computed(() => {
  return settingsStore.showSettings
})
const showTagsView = computed(() => {
  return settingsStore.showTagsView
})
const fixedHeader = computed(() => {
  return settingsStore.fixedHeader
})
const showGreyMode = computed(() => {
  return settingsStore.showGreyMode
})
const showColorWeakness = computed(() => {
  return settingsStore.showColorWeakness
})

const showTagIcon = computed(() => {
  return settingsStore.showTagIcon
})
const handleClickOutside = () => {
  appStore.closeSidebar(false)
}

</script>

<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="classObj.mobile && classObj.openSidebar" class="drawer-bg" @click="handleClickOutside" />
    <!-- 左侧显示区域 -->
    <Sidebar class="sidebar-container" />
    <div :class="{ hasTagsView: showTagsView }" class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
        <NavigationBar />
        <TagsView v-if="showTagsView" />
      </div>
      <!-- 主要 -->
      <AppMain />
      <!-- 主题控制 -->
      <RightPanel v-if="showSettings">
        <Settings />
      </RightPanel>
    </div>
    <div class="bg-indigo-lighten-1 text-center d-flex flex-column join-us-bar">
      <div>
        <v-btn v-for="icon in icons" :key="icon" class="mx-4" :icon="icon" variant="text"></v-btn>
      </div>

      <div class="pt-0">
        MineCosmos 生态计划,开发交流群:729784385 (vue3,ts,java,csharp,.Net 熟悉bukkit farbric最佳)
      </div>

      <v-divider></v-divider>

      <div>
        {{ new Date().getFullYear() }} — <strong>MineCosmos</strong>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
// 样式格式化
@import "@/styles/mixins.scss";

$join-us-bar-height: var(--v3-join-us-bar-height);

.app-wrapper {
  @include clearfix;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.showGreyMode {
  filter: grayscale(1);
}

.showColorWeakness {
  filter: invert(0.8);
}

.drawer-bg {
  background-color: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.main-container {
  height: calc(100% - $join-us-bar-height);
  transition: margin-left 0.28s;
  // 动态切换宽度
  margin-left: var(--v-sidebar-width);
  position: relative;
  width: auto;
}

.sidebar-container {
  transition: width 0.28s;
  width: var(--v-sidebar-width) !important;
  height: 100% !important;
  position: fixed;
  font-size: 16px;
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 1px 5px rgba(233, 30, 99, .3);
  z-index: 1001;
  // overflow: hidden;
  overflow: hidden auto;

  // background: darkgreen;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - var(--v-sidebar-width));
  transition: width 0.28s;
}

.hideSidebar {
  .main-container {
    margin-left: var(--v3-sidebar-hide-width);
  }

  .sidebar-container {
    width: var(--v3-sidebar-hide-width) !important;
    height: 100% !important;
  }

  .fixed-header {
    width: calc(100% - var(--v3-sidebar-hide-width));
  }
}

.join-us-bar {
  position: relative;
  z-index: 1002;
} 

// for mobile response 适配移动端
.mobile {
  .main-container {
    margin-left: 0px;
  }

  .sidebar-container {
    transition: transform 0.28s;
    width: var(--v-sidebar-width) !important;
  }

  &.openSidebar {
    position: fixed;
    top: 0;
  }

  &.hideSidebar {
    .sidebar-container {
      pointer-events: none;
      transition-duration: 0.3s;
      transform: translate3d(calc(0px - var(--v-sidebar-width)), 0, 0);
    }
  }

  .fixed-header {
    width: 100%;
  }
}

.withoutAnimation {

  .main-container,
  .sidebar-container {
    transition: none;
  }
}
</style>
